<template>
  <view class="app-container">
    <!-- 左侧预览栏 -->
    <view class="preview-sidebar" v-if="showThumbnail">
      <view 
        v-for="i in totalPhotoCount" 
        :key="i" 
        class="preview-item"
        :class="{'current': i === currentPhotoIndex}"
      >
        <view class="preview-number">{{i}}</view>
        <view class="empty" v-if="!photos[i-1]">
          <uni-icons type="camera" size="24" color="rgba(255, 255, 255, 0.7)"></uni-icons>
        </view>
        <image v-else :src="photos[i-1].local_path" mode="aspectFill"></image>
        <view class="retake-btn" v-if="photos[i-1]" @click="retakePhoto(i)">
          <uni-icons type="reload" size="16" color="#ffffff"></uni-icons>
        </view>
      </view>
    </view>
    
    <!-- 相机视图 -->
    <view class="camera-view">
      <!-- 顶部操作按钮 -->
      <view class="action-buttons">
        <view class="action-btn cancel-btn" @click="exitCapture">
          <uni-icons type="closeempty" size="18" color="#ffffff"></uni-icons>
          <text>取消</text>
        </view>
        
        <view class="action-btn confirm-btn" @click="goToPreview" :class="{'btn-disabled': !hasCompletedPhotos}">
          <uni-icons type="checkmarkempty" size="18" color="#ffffff"></uni-icons>
          <text>完成</text>
        </view>
      </view>
      
      <view class="camera-container" :class="{ 'flash': isFlashing }">
        <camera 
          v-if="!isElectron && !isH5 && canUseCamera"
          :device-position="devicePosition" 
          :flash="flashEnabled ? 'on' : 'off'" 
          @error="handleCameraError"
          class="camera"
        ></camera>
        
        <!-- Web相机代替方案将由JS动态添加 -->
        <view v-if="(isElectron || isH5) && !videoElement" class="camera web-camera-placeholder"></view>
        
        <!-- 相机错误显示 -->
        <view v-if="!canUseCamera" class="camera-error">
          <view class="error-icon">
            <uni-icons type="closeempty" size="48" color="#ffffff"></uni-icons>
          </view>
          <view class="error-message">
            {{ errorMessage || '无法访问相机，请检查权限设置或尝试刷新页面' }}
          </view>
          <view class="action-btn retry-btn" @click="retryCamera" style="margin-top: 20px;">
            <uni-icons type="reload" size="18" color="#ffffff"></uni-icons>
            <text>重试</text>
          </view>
        </view>
        
        <!-- 倒计时 -->
        <view class="countdown" v-if="countdown > 0">
          <text class="countdown-number">{{ countdown }}</text>
        </view>
        
        <!-- 闪光效果 -->
        <view class="flash-overlay" :class="{'flash-active': isFlashing}"></view>
        
        <!-- 显示已拍照片 -->
        <image 
          v-if="lastPhotoPath && !isCounting" 
          :src="lastPhotoPath" 
          class="captured-photo-display"
          mode="aspectFill"
        ></image>
      </view>
      
      <!-- 照片操作按钮 -->
      <view class="photo-action-buttons" v-if="lastPhotoPath && !isCounting">
        <view class="action-btn cancel-btn" @click="cancelPhoto">
          <uni-icons type="closeempty" size="18" color="#ffffff"></uni-icons>
          <text>重拍</text>
        </view>
        
        <view class="action-btn confirm-btn" @click="confirmPhoto">
          <uni-icons type="checkmarkempty" size="18" color="#ffffff"></uni-icons>
          <text>确认</text>
        </view>
      </view>
      
      <!-- 底部控制按钮 -->
      <view class="bottom-controls" v-if="!lastPhotoPath && !isCounting && (isElectron || isH5)">
        <view class="control-btn" @click="toggleCameraPosition">
          <uni-icons type="loop" size="24" color="#ffffff"></uni-icons>
        </view>
        
        <!-- Electron开发环境中添加测试图片按钮 -->
        <view class="control-btn" @click="useTestImage" v-if="isElectron">
          <uni-icons type="image" size="24" color="#ffffff"></uni-icons>
        </view>
      </view>
      
      <!-- 调试信息显示 -->
      <view class="debug-info" v-if="isElectron">
        <view>平台: {{ isElectron ? 'Electron' : isH5 ? 'Web' : 'Native' }}</view>
        <view>相机状态: {{ canUseCamera ? '可用' : '不可用' }}</view>
        <view v-if="!canUseCamera">错误: {{ errorMessage }}</view>
        <view>视频元素: {{ videoElement ? '已创建' : '未创建' }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'

export default {
  components: {
    uniIcons
  },
  data() {
    return {
      templateId: '',
      totalPhotoCount: 4, // 默认4张照片
      currentPhotoIndex: 1,
      countdown: 0,
      isCounting: false,
      isCapturing: false,
      isFlashing: false,
      lastPhotoPath: '',
      photos: [], // 存储照片信息的数组
      cameraContext: null,
      countdownSeconds: 5,
      flashScreen: true,
      devicePosition: 'front',
      flashEnabled: false,
      selectedTemplate: null,
      tempPhotoPath: null, // 临时存储当前拍摄的照片
      isElectron: false,  // 是否运行在Electron环境
      isH5: false,       // 是否运行在H5环境
      videoElement: null, // 原生video元素引用
      stream: null,      // 媒体流
      errorMessage: '',  // 错误信息
      canUseCamera: true, // 是否可以使用相机
      debugMode: true,   // 调试模式
      testImages: [      // 测试图片
        '/static/test_photo_1.jpg',
        '/static/test_photo_2.jpg',
        '/static/test_photo_3.jpg',
        '/static/test_photo_4.jpg'
      ],
      showThumbnail: true // 默认显示缩略图
    }
  },
  computed: {
    hasCompletedPhotos() {
      // 检查是否至少有一张照片已完成
      return this.photos.some(photo => photo !== null);
    },
    platformInfo() {
      // 返回平台信息用于调试
      return {
        isElectron: this.isElectron,
        isH5: this.isH5,
        canUseCamera: this.canUseCamera
      };
    }
  },
  onLoad(options) {
    this.templateId = options.template_id || '';
    this.totalPhotoCount = parseInt(options.photo_count || 4);
    
    // 初始化照片数组
    this.photos = new Array(this.totalPhotoCount).fill(null);
    
    // 获取选中的模板
    const template = uni.getStorageSync('selected_template');
    if (template) {
      this.selectedTemplate = template;
      this.totalPhotoCount = template.photo_count || this.totalPhotoCount;
    }
    
    // 加载捕捉设置
    this.loadCaptureSettings();
    
    // 检测运行环境
    this.detectPlatform();
    
    // 初始化相机
    this.initCamera();
    
    // 自动开始倒计时 - 延迟启动
    setTimeout(() => {
      this.startCapture();
    }, 1000);
  },
  onUnload() {
    // 停止媒体流
    this.stopMediaStream();
  },
  methods: {
    // 加载捕捉设置
    loadCaptureSettings() {
      try {
        const cachedSettings = localStorage.getItem('app_settings');
        if (cachedSettings) {
          const settings = JSON.parse(cachedSettings);
          
          if (settings.capture && settings.capture.length > 0) {
            // 加载倒计时秒数
            const countdown = settings.capture.find(s => s.key === 'capture_countdown_seconds');
            if (countdown) {
              let value = Number(countdown.value);
              if (!isNaN(value) && value >= 3 && value <= 8) {
                this.countdownSeconds = value;
              }
            }
            
            // 加载闪光效果设置
            const flash = settings.capture.find(s => s.key === 'capture_flash_screen');
            if (flash !== undefined) {
              this.flashScreen = flash.value === true;
            }
            
            // 加载缩略图显示设置
            const thumbnail = settings.capture.find(s => s.key === 'capture_thumbnail_show');
            if (thumbnail !== undefined) {
              this.showThumbnail = thumbnail.value === true;
            } else {
              this.showThumbnail = true; // 默认显示
            }
            
            console.log('已加载捕捉设置:', {
              countdownSeconds: this.countdownSeconds,
              flashScreen: this.flashScreen,
              showThumbnail: this.showThumbnail
            });
          }
        }
      } catch (error) {
        console.error('加载捕捉设置失败:', error);
      }
    },
    
    // 检测当前运行平台
    detectPlatform() {
      // 检查是否在Electron环境中运行
      this.isElectron = window && window.process && window.process.type === 'renderer';
      
      // 检查是否在H5环境中运行
      // #ifdef H5
      this.isH5 = true;
      // #endif
      
      console.log('平台检测结果:', this.platformInfo);
    },
    
    // 初始化相机
    async initCamera() {
      try {
        // 如果在Electron或H5环境中，使用Web API
        if (this.isElectron || this.isH5) {
          await this.initWebCamera();
        } else {
          // 在原生环境中使用uni-app API
          try {
            this.cameraContext = uni.createCameraContext();
          } catch (e) {
            console.error('创建相机上下文失败:', e);
            this.errorMessage = '无法创建相机上下文';
            this.canUseCamera = false;
            
            // 尝试回退到Web API
            await this.initWebCamera();
          }
        }
      } catch (e) {
        console.error('初始化相机失败:', e);
        this.handleCameraError({
          detail: { errMsg: e.message || '初始化相机失败' }
        });
        this.canUseCamera = false;
      }
    },
    
    // 使用Web API初始化相机
    async initWebCamera() {
      // 如果navigator.mediaDevices可用
      if (navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        try {
          // 请求相机权限
          const constraints = {
            video: {
              facingMode: this.devicePosition === 'front' ? 'user' : 'environment',
              width: { ideal: 1280 },
              height: { ideal: 720 }
            },
            audio: false
          };
          
          // 获取媒体流
          this.stream = await navigator.mediaDevices.getUserMedia(constraints);
          
          // 延迟执行，确保DOM已更新
          setTimeout(() => {
            // 获取video元素
            const videoEl = document.querySelector('.camera');
            if (videoEl) {
              // 如果使用的是camera组件而不是原生video，可能需要添加一个video元素
              if (videoEl.tagName !== 'VIDEO') {
                const newVideo = document.createElement('video');
                newVideo.className = 'web-camera';
                newVideo.autoplay = true;
                newVideo.playsInline = true;
                
                // 添加样式
                newVideo.style.width = '100%';
                newVideo.style.height = '100%';
                newVideo.style.objectFit = 'cover';
                
                // 将video添加到相机容器
                const container = document.querySelector('.camera-container');
                if (container) {
                  container.appendChild(newVideo);
                  this.videoElement = newVideo;
                }
              } else {
                this.videoElement = videoEl;
              }
              
              // 设置视频源
              if (this.videoElement) {
                this.videoElement.srcObject = this.stream;
                this.videoElement.onloadedmetadata = () => {
                  this.videoElement.play();
                  console.log('Web相机已初始化');
                };
              }
            }
          }, 500);
          
          this.canUseCamera = true;
        } catch (e) {
          console.error('获取媒体流失败:', e);
          this.errorMessage = '无法访问相机: ' + (e.message || '未知错误');
          this.canUseCamera = false;
        }
      } else {
        console.error('浏览器不支持getUserMedia API');
        this.errorMessage = '浏览器不支持相机功能';
        this.canUseCamera = false;
      }
    },
    
    // 停止媒体流
    stopMediaStream() {
      if (this.stream) {
        const tracks = this.stream.getTracks();
        tracks.forEach(track => track.stop());
        this.stream = null;
        
        if (this.videoElement) {
          this.videoElement.srcObject = null;
        }
      }
    },
    
    startCapture() {
      if (this.isCounting || this.isCapturing) return;
      
      if (!this.canUseCamera) {
        uni.showToast({
          title: '相机不可用: ' + this.errorMessage,
          icon: 'none',
          duration: 3000
        });
        return;
      }
      
      this.isCounting = true;
      this.countdown = this.countdownSeconds;
      this.lastPhotoPath = ''; // 清除上一张照片
      
      // 开始倒计时
      this.countdownTimer = setInterval(() => {
        this.countdown--;
        
        // 播放语音提示
        this.playCountdownVoice(this.countdown);
        
        if (this.countdown <= 0) {
          clearInterval(this.countdownTimer);
          this.isCounting = false;
          this.takePhoto();
        }
      }, 1000);
    },
    
    async takePhoto() {
      this.isCapturing = true;
      
      // 闪屏效果
      if (this.flashScreen) {
        console.log('应用闪光效果');
        this.isFlashing = true;
        
        // 延迟拍照，先让闪光效果显示
        await new Promise(resolve => setTimeout(resolve, 100));
        
        // 拍照
        try {
          let result;
          
          // 使用Web API或原生API拍照
          if ((this.isElectron || this.isH5) && this.videoElement) {
            result = await this.takePhotoWithWebAPI();
          } else if (this.cameraContext) {
            result = await this.takePhotoWithUniApp();
          } else {
            throw new Error('无可用的相机API');
          }
          
          // 保存照片信息
          this.lastPhotoPath = result.tempImagePath || result.path;
          this.tempPhotoPath = result.tempImagePath || result.path;
          
          // 延迟关闭闪光效果，使其更明显
          setTimeout(() => {
            this.isFlashing = false;
          }, 300);
          
          // 显示操作按钮，等待用户确认
          this.isCapturing = false;
        } catch (e) {
          this.isFlashing = false;
          uni.showToast({
            title: '拍照失败: ' + (e.message || '未知错误'),
            icon: 'none'
          });
          this.isCapturing = false;
          console.error('拍照失败:', e);
        }
      } else {
        console.log('闪光效果已禁用');
        // 不使用闪光效果，直接拍照
        try {
          let result;
          
          // 使用Web API或原生API拍照
          if ((this.isElectron || this.isH5) && this.videoElement) {
            result = await this.takePhotoWithWebAPI();
          } else if (this.cameraContext) {
            result = await this.takePhotoWithUniApp();
          } else {
            throw new Error('无可用的相机API');
          }
          
          // 保存照片信息
          this.lastPhotoPath = result.tempImagePath || result.path;
          this.tempPhotoPath = result.tempImagePath || result.path;
          
          // 显示操作按钮，等待用户确认
          this.isCapturing = false;
        } catch (e) {
          uni.showToast({
            title: '拍照失败: ' + (e.message || '未知错误'),
            icon: 'none'
          });
          this.isCapturing = false;
          console.error('拍照失败:', e);
        }
      }
    },
    
    // 使用uni-app API拍照
    async takePhotoWithUniApp() {
      return new Promise((resolve, reject) => {
        if (!this.cameraContext) {
          reject(new Error('相机上下文不存在'));
          return;
        }
        
        this.cameraContext.takePhoto({
          quality: 'high',
          success: resolve,
          fail: reject
        });
      });
    },
    
    // 使用Web API拍照
    async takePhotoWithWebAPI() {
      return new Promise((resolve, reject) => {
        try {
          if (!this.videoElement) {
            reject(new Error('视频元素不存在'));
            return;
          }
          
          // 创建canvas用于截图
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          
          // 设置canvas尺寸为视频尺寸
          canvas.width = this.videoElement.videoWidth;
          canvas.height = this.videoElement.videoHeight;
          
          // 将视频帧绘制到canvas
          ctx.drawImage(this.videoElement, 0, 0, canvas.width, canvas.height);
          
          // 将canvas转换为图片
          const dataURL = canvas.toDataURL('image/jpeg', 0.92);
          
          // 在Electron中，可以直接使用dataURL
          resolve({ path: dataURL, tempImagePath: dataURL });
        } catch (e) {
          reject(e);
        }
      });
    },
    confirmPhoto() {
      // 确认当前照片
      this.photos[this.currentPhotoIndex - 1] = {
        local_path: this.tempPhotoPath,
        index: this.currentPhotoIndex
      };
      
      // 判断是否需要继续拍照
      if (this.currentPhotoIndex < this.totalPhotoCount) {
        this.currentPhotoIndex++;
        this.startCapture(); // 开始拍摄下一张
      } else {
        // 所有照片拍摄完成，跳转到预览页面
        this.goToPreview();
      }
    },
    cancelPhoto() {
      // 取消当前照片，重新拍摄
      this.lastPhotoPath = '';
      this.tempPhotoPath = null;
      this.startCapture();
    },
    retakePhoto(index) {
      // 重拍指定位置的照片
      this.currentPhotoIndex = index;
      this.photos[index - 1] = null;
      this.lastPhotoPath = '';
      this.tempPhotoPath = null;
      this.startCapture();
    },
    goToPreview() {
      // 检查是否有照片
      if (!this.hasCompletedPhotos) {
        uni.showToast({
          title: '请至少拍摄一张照片',
          icon: 'none'
        });
        return;
      }
      
      // 过滤掉空值，只保留有效照片
      const validPhotos = this.photos.filter(photo => photo !== null);
      
      // 将照片信息存储到本地
      uni.setStorageSync('captured_photos', validPhotos);
      
      // 跳转到预览页面
      uni.navigateTo({
        url: `/pages/preview/index?template_id=${this.templateId}`
      });
    },
    exitCapture() {
      // 显示确认对话框
      uni.showModal({
        title: '确认取消',
        content: '确定要取消拍照吗？已拍摄的照片将不会保存。',
        confirmText: '确认',
        cancelText: '继续拍照',
        success: (res) => {
          if (res.confirm) {
            // 取消拍照，返回模板选择页面
            uni.navigateBack();
          }
        }
      });
    },
    skipCurrentPhoto() {
      if (this.currentPhotoIndex < this.totalPhotoCount) {
        this.currentPhotoIndex++;
        this.startCapture();
      }
    },
    toggleCameraPosition() {
      this.devicePosition = this.devicePosition === 'front' ? 'back' : 'front';
      
      // 如果是Web API，需要重新初始化相机
      if ((this.isElectron || this.isH5) && this.stream) {
        this.stopMediaStream();
        this.initWebCamera();
      }
    },
    toggleFlash() {
      this.flashEnabled = !this.flashEnabled;
    },
    handleCameraError(e) {
      const errMsg = e.detail && e.detail.errMsg ? e.detail.errMsg : '未知错误';
      this.errorMessage = errMsg;
      
      uni.showToast({
        title: '相机启动失败: ' + errMsg,
        icon: 'none',
        duration: 3000
      });
      console.error('相机错误:', e);
      
      // 标记相机不可用
      this.canUseCamera = false;
    },
    retryCamera() {
      this.canUseCamera = true;
      this.errorMessage = '';
      
      // 清理可能存在的资源
      this.stopMediaStream();
      
      // 重新初始化相机
      this.initCamera();
    },
    useTestImage() {
      // 在Electron环境中，可以使用测试图片替代相机拍摄
      const testImageIndex = Math.floor(Math.random() * this.testImages.length);
      const testImagePath = this.testImages[testImageIndex];
      
      // 模拟相机拍照效果
      this.isFlashing = true;
      setTimeout(() => {
        this.isFlashing = false;
        this.lastPhotoPath = testImagePath;
        this.tempPhotoPath = testImagePath;
      }, 300);
      
      uni.showToast({
        title: '已使用测试图片',
        icon: 'none'
      });
    },
    playCountdownVoice(number) {
      // 这里实现语音播放逻辑
      console.log(`播放倒计时语音: ${number}`);
    }
  }
}
</script>

<style>
.app-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #000;
  display: flex;
}

/* 左侧预览栏 */
.preview-sidebar {
  width: 240px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 10;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.preview-item {
  position: relative;
  width: 200px;
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.preview-item image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-item .empty {
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 24px;
  height: 100%;
  width: 100%;
}

.preview-number {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
}

.preview-item.current .preview-number {
  background-color: #1a73e8;
}

.retake-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  transition: all 0.2s ease;
}

.retake-btn:active {
  background-color: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}

/* 相机视图 */
.camera-view {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.camera-container {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #000;
}

.camera {
  width: 100%;
  height: 100%;
}

.flash {
  background-color: #fff;
}

.flash-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  opacity: 0;
  z-index: 30;
  pointer-events: none;
  transition: opacity 0.1s ease-in-out;
}

.flash-active {
  opacity: 1;
}

.captured-photo-display {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 5;
}

.countdown {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  border-radius: 75px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.countdown-number {
  font-size: 80px;
  font-weight: bold;
  color: white;
}

/* 顶部操作按钮 */
.action-buttons {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 100px;
  z-index: 20;
}

/* 照片操作按钮 */
.photo-action-buttons {
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 30px;
  z-index: 20;
}

.action-btn {
  padding: 20px 50px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease;
}

.cancel-btn {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}

.confirm-btn {
  background-color: #34a853;
  color: white;
}

.btn-disabled {
  background-color: rgba(52, 168, 83, 0.5);
  opacity: 0.7;
  pointer-events: none;
}

.web-camera {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 4;
}

.web-camera-placeholder {
  width: 100%;
  height: 100%;
  background-color: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
}

.camera-error {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 20px;
  text-align: center;
  z-index: 100;
}

.error-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

.error-message {
  font-size: 18px;
  max-width: 80%;
  line-height: 1.5;
  margin-bottom: 20px;
}

.retry-btn {
  background-color: #1a73e8;
  color: white;
  padding: 12px 24px;
}

/* 增加底部按钮区域 */
.bottom-controls {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
  z-index: 15;
}

.control-btn {
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
}

.control-btn:active {
  background-color: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}

/* 调试信息区域 */
.debug-info {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  padding: 8px;
  border-radius: 4px;
  max-width: 300px;
  overflow: hidden;
  z-index: 1000;
  font-family: monospace;
}
</style> 